<!-- 添加主容器中的栅格系统 -->
<template>
  <div class="choose-show-container-component-custom-data" v-if="dialogShow">
    <SetDesignDialog
      :title="'容器组件编辑' + name"
      :dialogVisible="dialogShow"
      :close="close"
      :saveclose="saveclose"
      :hasfooter="false"
      ref="settingDialog"
    >
      <div class="in-carousel">
        <el-carousel
          ref="elCarousel"
          :initial-index="initialIndex"
          :autoplay="false"
          :indicator-position="'none'"
          :arrow="'never'"
          height="410px"
        >
          <el-carousel-item>
            <NestingComponentCustom
              ref="nestingComponentCustom"
              :containerData="containerData"
              :component="compData"
              :componentTypes="componentTypes"
              :clickCurrentComponent="clickCurrentComponent"
              :close="close"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import NestingComponentCustom from '@/components/common/design/dialog/box/NestingComponentCustom.vue'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import { mapState } from 'vuex'
import PubSub from 'pubsub-js'
// var _ = require('lodash')
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    // 容器组件内容编辑
    VueFunctions.method(WindowType.CHOOSE_SHOW_CONTAINER_COMPONENT_CUSTOM_DATA, ({ containerData, setNum, compData }) => {
      this.close()
      this.dialogShow = true
      this.name = containerData.name
      this.containerData = containerData

      // 打开容器设置，关闭其他所有的展示组件编辑框
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE)

      // 获取展示组件类型数据
      this.componentTypes = filterComponentType(this.design.ref.contentWindow.vueFunc.getComponentType())

      // 设置是否有嵌套表单容器组件
      this.setNestingContainer()

      this.compData = compData

      this.$nextTick(() => {
        if (this.$refs['settingDialog']) {
          this.$refs['settingDialog'].open()
        }
        // 设置展示组件初始值
        if (this.$refs['nestingComponentCustom']) {
          this.$refs['nestingComponentCustom'].init()
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      name: '',
      containerData: null,
      formLabelWidth: '120px',
      // 是否存在嵌套的容器
      nestingContainer: false,
      initialIndex: 0,
      // // 默认情况下的选择组件
      // defaultComponentType: -1,
      // 选择的组件
      componentType: 0,
      // 获取component类型数据
      componentTypes: [],
      // 现有组件的数据
      compData: null
    }
  },
  watch: {
    componentCateType: {
      handler () {
        this.componentType = 0
      },
      deep: true
    }
  },
  methods: {
    close () {
      this.dialogShow = false
      this.name = ''
      this.containerData = null
      this.nestingContainer = false
      this.initialIndex = 0
      this.componentTypes = []
      this.compData = null
      this.componentType = 0
    },
    chooseContainer () {
      this.$refs['elCarousel'].setActiveItem(0)
    },
    chooseMind () {
      this.$refs['elCarousel'].setActiveItem(1)
    },
    chooseComponent () {
      this.$refs['elCarousel'].setActiveItem(2)
    },
    setNestingContainer () {
      this.nestingContainer = this.design.ref.contentWindow.vueFunc.isNestingContainer(this.containerData)
    },
    // 添加系统表单组件
    chooseForm () {
      // 弹窗选择表单
      var containerBox = this.containerData
      window[PubsubType.PUBSUB_DIGLOG_CHOOSE_FORM]((response, closeChooseForm) => {
        this.design.ref.contentWindow.vueFunc.chooseFormForContainerBox(containerBox, response, () => {
          if (typeof closeChooseForm === 'function') {
            closeChooseForm()
          }
        })
      })
      // 关闭
      this.close()
    },
    // 编辑当前组件
    clickCurrentComponent () {
      this.design.ref.contentWindow.vueFunc.setupComponent(this.compData)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    NestingComponentCustom
  }
}

function filterComponentType (componentType) {
  // 漂浮组件需要去除
  let index = componentType.findIndex(element => {
    return element.id === 19
  })
  if (index > -1) {
    componentType.splice(index, 1)
  }
  // 过滤掉 全部表单组件
  let result = componentType.filter(element => {
    return element.cateType === 1 || element.cateType === 3
  })
  return result
}

</script>

<style scoped>
.choose-show-container-component-custom-data .in-carousel {
  min-width: 766px;
}
.choose-show-container-component-custom-data .component-list {
  height: 168px;
}
.component-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
<style>
.component-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
